<template>
    <!-- rowone -->
    <div class="rowOne">
        <!-- logo -->
        <div class="logo">
            <img src="../../assets/img/indexHeader/1.png" alt="" width="197px" @click="$router.push({path:'/'})">
        </div>
        <!-- search -->
        <div class="search">
            <input type="text" name="" @focus="inputFocus" v-model="inputVal" @blur="inputBlur">
            <img src="../../assets/img/indexHeader/2.png" alt="" @click="search">
        </div>
        <div class="call">
            <img src="../../assets/img/indexHeader/3.png" alt="">
            <span style="margin-left:10px;margin-right:2px">400-800-3683</span>
            <img src="../../assets/img/indexHeader/line.png" alt="" class="line">
            <span style="color:#595757;margin-left:6px;">全国免费咨询热线</span>
        </div>
    </div>
</template>
<script>
const url = require("../../assets/img/indexHeader/4-1.png");
const urlOne = require("../../assets/img/indexHeader/4.png");
export default {
  data() {
    return {
      inputVal: "搜索媒体ID、账号或关键字", 
    };
  },
  methods: {
    search() {
      this.$router.push({ path: "/searchAll", query: { str: this.inputVal } });
    },
    inputFocus() {
      this.inputVal = "";
    },
    inputBlur() {
      if (this.inputVal === "") {
        this.inputVal = "搜索媒体ID、账号或关键字";
      }
    }
  }
};
</script>
<style scoped>
nav {
  width: 1200px;
  margin: 0 auto;
}
.nav {
  margin-top: 18px;
}
.rowOne {
  overflow: hidden;
}
.rowOne .logo {
  float: left;
}
.rowOne .search {
  position: relative;
  float: left;
}
.rowOne .call {
  float: right;
}
.search input {
  width: 403px;
  height: 35px;
  border: 1px solid #797778;
  border-top-left-radius:50px;
  border-top-right-radius:50px;
  border-bottom-right-radius:50px;
  border-bottom-left-radius:50px;
  /* padding-left: 20%; */
  margin-left: 200px;
  box-sizing: border-box;
  /* color: rgb(89, 87, 87); */
  color:#c6c6c6;
  font-size: 14px;
  text-align: center;
}
input::-webkit-input-placeholder{
             color:#c6c6c6;
        }
.search img {
  position: absolute;
  top: 8px;
  left: 567px;
}
.call img {
  float: left;
}
.call span:nth-child(2) {
  font-size: 24px;
  color: rgb(237, 64, 64);
  font-family: SimHei Regular;
  float: left;
  margin-left: 5px;
}
.call img:nth-child(3){
  margin-top: 7px;
  margin-left: 5px;
}
.call span:nth-child(4) {
  font-size: 14px;
  color: rgb(85, 85, 85);
  font-family: PingFang SC;
  float: left;
  margin-top: 3px;
  margin-left: 5px;
}
</style>


